<template>
  <div class="page-banner-list">
    <div class="page-banner-list__header">
      
        <el-button type="danger" @click="handleSelectIds(selectIds)">批量删除</el-button>
        <el-button type="primary" @click="$router.push('/banner/add')">添加轮播图</el-button>
        <el-button type="success" @click="getTableData">
          <el-icon><Refresh /></el-icon>
        </el-button>
        
    </div>

    <el-table :data="displayTableData" @selection-change="onSelectionChange">
      <!-- <el-table-column type="index" label="序号"  /> -->
      <!-- type设置为selection改为多选框 -->
      <el-table-column type="selection" />
      <el-table-column label="图片">
        <!-- 设置默认插槽
        提供作用域插槽
    作用域插槽中有row这个数据，row就是当前行的数据对象 -->
        <template #default="scope">
          <img :src="scope.row.img" style="height: 100px" />
        </template>
      </el-table-column>
      <el-table-column prop="alt" label="描述" />
      <el-table-column prop="link" label="链接" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-popconfirm
            title="你确定要删除吗？"
            @confirm="handleDel(scope.row.bannerid)"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>

      <!-- <template #empty>
        <el-empty description="description" />
      </template> -->
    </el-table>

    <!-- 分页器 -->
    <div class="page-banner-list__footer">
      <el-pagination 
      background 
      layout="prev, pager, next" 
      :total="tableData.length" 
      :page-size="pageSize"
      v-model:current-page="page"
      />
    </div>
  </div>
</template>

<script>
import { getBannerList, delBannerList ,delBannerSelects} from "../../api/banner.js";
export default {
  data() {
    return {
      tableData: [],
      pageSize:5,
      page:1,
      selectIds:[]
    };
  },
  computed:{
    displayTableData(){
      return this.tableData.slice((this.page-1)*this.pageSize,this.page*this.pageSize)
    }
  },
  methods: {
    getTableData() {
      getBannerList()
        .then((response) => {
          console.log(response);
          this.tableData = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //处理删除
    handleDel(id) {
      console.log(id);
      delBannerList(id)
        .then((response) => {
          console.log(response);
          this.getTableData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSelectIds(id) {
      console.log(id);
      delBannerSelects(id)
        .then((response) => {
          console.log(response);
          this.getTableData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    onSelectionChange(data){
      console.log(data);
      this.selectIds=data.map((item)=>{
        return item.bannerid
      })
    }
  },
  mounted() {
    this.getTableData();
  },
};
</script>

<style lang="scss" scoped>
.page-banner-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  &__header ,&__footer{
    height: 60px;
    // background: pink;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  & .el-table {
    flex: 1;
    // overflow-y: auto;
  }
}
</style>
